import React, { Fragment, Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { login, logout } from './store/actions'
import styles from './style.less'
import withStyle from '../../withStyle'

class Header extends Component {
  componentWillMount() {
    if (this.props.staticContext) {
      this.props.staticContext.css.push(styles._getCss())
    }
  }
  render() {
    const { login, handleLogin, handleLogout } = this.props
    return (
      < div className={styles.container}>
        <Link to='/'  className={styles.item}>首页</Link>
        {
          login ? <Fragment>
            <Link to='/translation'  className={styles.item}>翻译列表</Link>
            <div onClick={handleLogout}  className={styles.item}>退出</div>
          </Fragment> : <div onClick={handleLogin}  className={styles.item}>登录</div>
        }
      </div >
    )
  }
}

const mapState = state => ({ login: state.header.login })

const mapDispatch = (dispatch) => ({
  handleLogin() {
    dispatch(login())
  },
  handleLogout() {
    dispatch(logout())
  }
})

export default connect(mapState, mapDispatch)(withStyle(Header,styles)) 